<template>
    <main>
      <div class="container-fluid">
        <div
          class="page-header min-height-300 gym"
          style="margin-right: -24px; 
          margin-left: -34%;"
        >
          <span class="mask bg-gradient-success opacity-6"></span>
        </div>
        
      </div>
      <div class="py-4 container-fluid">
        <div class="row">
          <div class="col-md-12">
            <div class="card">
              <div class="card-header pb-0">
                <div class="d-flex align-items-center">
                  <argon-button color="success" size="sm" class="ms-auto" @click="createOrder"
                  >Upload</argon-button>
                </div>    
              </div>
              <div class="card-body">
                <p class="text-uppercase text-sm">User Information</p>
                <div class="row">
                  <div class="col-md-6">
                    <label for="example-text-input" class="form-control-label"
                      >Facility Name</label><br>
                      <el-select v-model="form.f_name" filterable >
                        <el-option disabled value="">Please select one</el-option>
                        <el-option v-for="(item,index) in facility_list" :key="index" :value="item.f_name" :label="item.f_name"
                        @click="getFacilityIndex(index)"
                        ></el-option>
                      </el-select>
                  </div>
                  <div class="col-md-6">
                    <label for="example-text-input" class="form-control-label"
                      >User name</label> <br>
                    <el-select v-model="form.user_name" filterable v-if="facilityIndex != -1">
                        <el-option disabled value="">Please select one</el-option>
                        <el-option v-for="item in user_list" :key="item.id" :value="item.username" :label="item.username"></el-option>
                    </el-select>
                    <el-select v-model="form.user_name" filterable v-else>
                        <el-option disabled value="">Please select Facility first</el-option>
                        <el-option  disabled v-for="item in user_list" :key="item.id" :value="item.username" :label="item.username"></el-option>
                    </el-select>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-6">
                    <label for="example-text-input" class="form-control-label"
                      >Date</label><br>
                      <el-select v-model="form.date" @change="dateChange" v-if="facilityIndex != -1">
                        <el-option  disabled value="">Please select one</el-option>
                        <el-option  v-for="(date,index) in date" :key="index" :value="date" :label="date" @click="getDateIndex(index)"></el-option>  
                      </el-select>
                      <el-select v-model="form.date" @change="dateChange" v-else>
                        <el-option disabled  value="">Please select Facility first</el-option>
                        <el-option disabled  v-for="(date,index) in date" :key="index" :value="date" :label="date"></el-option>
                      </el-select>
                  </div>
                  <div class="col-md-6">
                    <label for="example-text-input" class="form-control-label"
                      >Detal time</label><br>
                      <el-select v-model="form.detail_time" v-if="facilityIndex == -1 ||dateIndex == -1">
                        <el-option disabled value="">Please select Facility and Date</el-option>
                        <div v-for="item in time" :key="item.id">
                            <el-option  disabled :value="item.name" :label="item.name" ></el-option>
                        </div>
                      </el-select>
                      <el-select v-model="form.detail_time" v-else>
                        <el-option disabled value="">Please select one</el-option>
                        <div v-for="time in showDetailList" :key="time">
                            <el-option :value="time.time" :label="time.time" v-if="time.capacity <facility_list[f_index].capacity" @click="getTime(time.time)"></el-option>
                            <el-option disabled :value="time.time" :label="time.time" v-else></el-option>
                            <!-- <div v-for="item in time" :key="item.id">
                            <el-option :value="item.name" :label="item.name" ></el-option> -->
                        </div>
                      </el-select>
                    <div class="input-group mb-3">
                    </div>
                  </div>
                  <div class="col-md-6">
                    <label for="example-text-input" class="form-control-label"
                      >Booking type</label><br>
                      <el-select v-model="form.type" v-if="facilityIndex == -1 ||dateIndex == -1">
                        <el-option disabled value="">Please select Facility and Date</el-option>
                        <div>
                          <el-option  disabled value=0 label="Individual" ></el-option>
                          <el-option  disabled value=1 label="organization" ></el-option>
                        </div>
                      </el-select>
                      <el-select v-model="form.type" v-else>
                        <el-option disabled value="">Please select one</el-option>
                        <div>
                            <el-option value=0 label="Individual" v-if="select_time.capacity<facility_list[f_index].capacity"></el-option>
                            <el-option disabled value=0 label="Individual" v-else></el-option>
                            <el-option value=1 label="organization" v-if="select_time.capacity==0"></el-option>
                            <el-option disabled value=1 label="organization" v-else></el-option>
                            <!-- <div v-for="item in time" :key="item.id">
                            <el-option :value="item.name" :label="item.name" ></el-option> -->
                        </div>
                      </el-select>
                    <div class="input-group mb-3">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </template>
  
  <script>
  // import ArgonSignupInput from "@/components/ArgonSignupInput.vue";
  import ArgonButton from "@/components/ArgonButton.vue";
  // import ArgonFileInput from "@/components/ArgonFileInput.vue"
  import axios from "axios"
  import router from "@/router/index.js"
  import {ElSelect, ElOption } from 'element-plus'

  
  
  const body = document.getElementsByTagName("body")[0];
  
  export default {
    name: "createfacility",
    data() {
      return {
        facilityIndex:-1,
        f_index:0,
        dateIndex:-1,
        timeIndex:-1,
        select_time:'',
        time_data:'',
        user_data:'',
        date_data:'',
        facility_data:'',
        detailDataList:[],
        form:{
          user_name:'',
          f_name:'',
          date:'',
          detail_time:''
        },
        showMenu: false,
        item:{
          id:Number,
          f_name:String,
          location:String,
          price:String,
          img:[],
        },
        time:[
          {id:1, name:'9:00-10:00'},
          {id:2, name:'10:00-11:00'},
          {id:3, name:'11:00-12:00'},
          {id:4, name:'12:00-13:00'},
          {id:5, name:'13:00-14:00'},
          {id:6, name:'14:00-15:00'},
          {id:7, name:'15:00-16:00'},
          {id:8, name:'16:00-17:00'},
          {id:9, name:'17:00-18:00'},
          {id:10, name:'18:00-19:00'},
        ],
        user_list:[],
        date:[],
        facility_list:[],
        detail_time:[],
        showDetailList:[],
      };
    },
    components: {
      // ElButton,
      ElOption,
      ElSelect,
      // ArgonSignupInput, 
      ArgonButton,
      // ArgonFileInput
    },
    methods:{
      //0 个人 1 团体
      createOrder(){
        let formData = new FormData()
        for(let key in this.form){
          console.log(this.form[key])
          formData.append(key,this.form[key])
        }
        axios({
        method:'get',
        baseURL: 'https://fitzone.work:8080/add_order',
        params:{
            user_name:this.form.user_name,
            f_name:this.form.f_name,
            date:this.form.date,
            detail_time:this.form.detail_time,
            type:this.form.type
        }
      }).then(res => {
        console.log(res.data)
        if(!res.data){
          alert("The time you choose is unavailable!")
        }
      }).catch(err => {
        console.log(err)
      })
      router.push('/orders')
        
      }, 
      getFile(e){
        let file = e.target.files[0]
          console.log(file)
          console.log(file.name)
          this.item.img = file
          console.log(this.item.img)
      },
      handleCreate (val) {//val是新增加的数据
                this.cityList.push({
                    value: val,
                    label: val
                });
      },
      getFacilityIndex(index){
        console.log(index)
        this.f_index=index
        this.facilityIndex = index * 7
      },
      getDateIndex(index){
        console.log(index)
        this.dateIndex = index
        this.timeIndex = this.facilityIndex + this.dateIndex
        this.showDetailList = this.detailDataList[this.timeIndex]
        console.log(this.showDetailList)
      },
      getTime(time){
        this.showDetailList.forEach(item=>{
          if(item.time==time){
            this.select_time=item
          }
        }
        )
      }
    },
    created(){
      const flag = sessionStorage.getItem("LOGINFLAG")
      if(flag == null){
        router.push('/signin')
      }
    },
    mounted() {
      axios
      .get('https://fitzone.work:8080/user')
      .then(res =>{
        console.log(res);
        this.user_list = res.data;
      })
      .catch(err =>{
        console.error(err);
      })
      axios
      .get('https://fitzone.work:8080/date')
      .then(res =>{
        console.log(res);
        this.date = res.data;
      })
      .catch(err =>{
        console.error(err);
      })
      axios
      .get('https://fitzone.work:8080/all')
      .then(res =>{
        console.log(res);
        this.facility_list = res.data;
      })
      .catch(err =>{
        console.error(err);
      })
      axios
      .get('https://fitzone.work:8080/detail_time')
      .then(res =>{
        console.log(res);
        this.detailDataList = res.data;
      })
      .catch(err =>{
        console.error(err);
      })
    },
    beforeMount(){
    this.$store.state.imageLayout = "profile-overview";
    this.$store.state.showNavbar = false;
    this.$store.state.showFooter = true;
    this.$store.state.hideConfigButton = true;
    body.classList.add("profile-overview");
    },
    beforeUnmount(){
    this.$store.state.isAbsolute = false;
    this.$store.state.imageLayout = "default";
    this.$store.state.showNavbar = true;
    this.$store.state.showFooter = true;
    this.$store.state.hideConfigButton = false;
    body.classList.remove("profile-overview");
    },

  };
  </script>
  <style>
.gym{
  background-image:url('./../assets/img/login.jpg');
  }
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type='number'] {
    -moz-appearance: textfield;
  }
</style>